<template>
	<scroll-view class="content" scroll-y enale-flex> 
		<!-- 头部 -->
		<view class="header">
			<view class="headersearch">
			<text class="iconfont icon-sousuo"></text>
			<input type="text" placeholder="在千万海外商品中搜索" placeholder-style="font-size:24upx">
			</view>
			<view class="login">登录/注册</view>
		</view>
		<!-- 导航 -->
		<view class="navList">
			<view class="navitem" v-for="(nav,index) in navList" :key="index">
				<image :src="nav.imgUrl" mode=""></image>
			</view>
			
		</view>
		<!-- 推荐 -->
		<view class="recommend">		
				<view class="recommendhead">
					<image class="title" src="https://kaola-haitao.oss.kaolacdn.com/0476ba41-5468-429b-8f91-c778ab38bde3.png" mode=""></image>
					<view class="recommendTime">
						<text class="time">{{hour}}</text>
						<text>:</text>
						<text class="time">{{minutes}}</text>
						<text>:</text>
						<text class="time">{{second}}</text>
					</view>
					<text class="subsidy">大牌底价补贴></text>
				</view>			
			<view class="recommendgoodlist">
				<view class="recommendgooditem" v-for="(item,index) in recommendList" :key="index">
				<image :src="item.url" mode=""></image>
				<view class="desc">硬核价￥<text>{{item.discountPrice}}</text></view>
				<text class="price">￥{{item.price}}</text>
				</view>
			</view>
		</view>
		<!-- 榜单 -->
		<view class="rank">
			<view class="rankItem" @click="changeNav(0)" >
				<view class="ranktitle" :class="{'activeone': currentId === 0}">美妆</view>
				<view class="ranklike" :class="{'activetwo': currentId === 0}">猜你喜欢</view>
			</view>
			<view class="rankItem" v-for="(rank,index) in rankList" :key="index" @click="changeNav(index+1)">
				<view class="ranktitle" :class="{'activeone': currentId === index+1}" >{{rank.title}}</view>
				<view class="ranklike" :class="{'activetwo': currentId === index+1}" >{{rank.sellPoint}}</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goodsList">
			<view class="goodsItem" v-for="(goods,index) in recList[currentId]" :key="index">
					<image class="goodsImage" :src="goods.goodsItem.goodsImage" mode=""></image>
					<view class="brand">
						<image :src="goods.goodsItem.countryLogo" mode=""></image>{{goods.goodsItem.countryName}}
					</view>
					<view class="desc">
						<image v-if="goods.goodsItem.titleForeHeadLabelList[0]" class="descImage" :src="goods.goodsItem.titleForeHeadLabelList[0]" mode=""></image>
						<text class="descTitle">{{goods.goodsItem.goodsName}}</text>
					</view>
					<view  :class="goods.goodsItem.labelListWithStyle[0].content ?'discount':'discounta'" >
						{{goods.goodsItem.labelListWithStyle[0].content || ""}}
					</view>
					<view class="price">
					优惠价$<text>{{goods.goodsItem.enjoyPriceInfo.enjoyPrice}}</text>
					</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { mapState , mapGetters} from 'vuex'
	export default {
		data() {
			return {
				title: 'Hello',
				currentId:0,
				hour:"03",
				minutes:"00",
				second:"00",
				flag:true
			}
		},
		mounted() {
			this.getNavlistImg(),
			this.getRecommend(),
			this.getIndexGoods(),
			this.time()
		},
		onLoad() {

		},
		methods: {
			time(){
				let Time = 10800
				let sId = setInterval(()=>{
				// // 总时间
				// let endtime = new Date("2022/12/01,23:20:01")
				// let startTime = new Date()
					// 算出来的是时
					let h = parseInt(Time/3600)
					// 算出来的是 秒  总秒数/60 是总分 ， 总分对60取余 就是现在的分钟， 商是时 余是该小时 剩余的分
					let m = parseInt(Time/60%60)
					// 总秒数对60取余 就是看总秒数里面 有多少个60 剩余的 就是要显示在屏幕上的秒数
					let s = parseInt(Time%60)
					console.log(h);
					if(h<10){
						h = "0" + h
					}
					if(Time < 0){
						this.flag = false
					}
					if(m<10 && m > 0){
						m = "0" + m
					}else if(m <= 0){
						m = "00"
					}
					if(s<10 && s > 0){
						s = "0" + s
					}else if(s <= 0){
						s = "00"
					}
					// console.log(h);
					this.hour = h
					this.minutes = m
					this.second = s
					Time = Time - 1
					// console.log(1);
					// console.log(this.flag);
					if(!this.flag){
						clearInterval(sId)
					}
				},1000)
			},
			changeNav(value){
				this.currentId = value
			},
			getNavlistImg(){
				this.$store.dispatch("home/getNavlist")
			},
			getRecommend(){
				this.$store.dispatch("home/getRecommendList")
			},
			getIndexGoods(){
				this.$store.dispatch("home/getIndexGoodsList")
			}
		},
		computed:{
				...mapState("home",["navList","recommendList"]),
				...mapGetters("home",["rankList","recList"])
		}
	}
</script>

<style lang="stylus">
.content
	height: 100%
	background-color: #F5F5F5
	// display: flex
	// flex-direction: column
	// justify-content: space-around
	// flex-wrap: wrap
	.header
		position: fixed
		top: 0
		width: 100%
		background-color: #FFFFFF
		height: 88upx
		display: flex
		justify-content: space-around
		align-items: center
		.headersearch
			border: 2upx solid #FF8686
			border-radius: 4vw
			display: flex
			width: 70%
			height: 60upx
			align-items: center
			box-sizing: border-box
			.iconfont
				margin:0 10upx 0 20upx
				color:#FF8686
				input 
					color: #999;
		.login
			height: 60upx
			width: 18%
			font-size: 24upx
			border-radius:8upx
			color: red
			border: 2upx solid red
			text-align: center
			line-height: 60upx
			box-sizing: border-box	
	.navList
		margin-top: 88upx
		display: flex
		height: 170upx
		align-items: center
		justify-content: space-around
		.navitem
			image
				height:170upx
				width: 150upx
	.recommend
		margin: 0 auto
		margin-top: 20upx
		background-color: #FFFFFF
		width: 90%
		height: 360upx
		display: flex
		flex-direction: column
		border-radius: 3.2vw
		.recommendhead
				height: 90upx
				display: flex
				padding: 0 10upx
				justify-content: space-between
				align-items: center
				.recommendTime
					color: #f7261d
					margin-left: -190upx
					.time
						margin: 0 5upx
						padding: 0 5upx
						width: 44upx
						height: 34upx
						background-color: #f7261d
						color: white
						font-size: 26upx
						border-radius: 0.8vw
				.title
					height: 34upx
					width: 140upx
				.subsidy
					font-size: 24upx
					color: red
		.recommendgoodlist
				height: 280upx
				display: flex
				justify-content: space-around
				align-items: center
			.recommendgooditem
				display: flex
				flex-direction: column
				justify-content: space-around
				align-items: center
				height: 280upx
				width: 180upx
				margin-bottom: 20upx
				image
					width: 170upx
					height: 170upx
				.desc
					font-size: 24upx
					color: red
					text
						font-weight: 700
						font-size: 32upx
				.price
					color:#999
					font-size: 28upx
					text-decoration: line-through
	.rank
		padding: 0 20upx
		display: flex
		height: 100upx
		margin-top: 20upx
		align-items: center
		justify-content: space-around
		.rankItem
			display: flex
			flex-direction: column
			align-items: center
			height: 100upx
			width: 120upx
			.ranktitle
				font-size:34upx
				color: #666
			& .activeone
				color:red
			.ranklike
				text-align: center
				width:130upx
				font-size: 24upx
				color: #999
			& .activetwo
				background-color:red
				color: white
				border-radius: 2.4vw
	.goodsList
		display: flex
		width: 100%
		flex-wrap: wrap
		justify-content: center
		.goodsItem
			margin: 5upx
			width:42%
			padding: 15upx
			display: flex
			flex-direction: column
			justify-content: space-between
			height:620upx
			border-radius:10upx
			background-color: #FFFFFF
		&::after
				content: ""
				width: 42%
				margin: 10upx
			.goodsImage
				width: 100%
				height: 400upx
			.brand
				margin-top: 10upx
				height: 32upx
				font-size: 24upx
				color: #666
				image
					margin-right: 10upx
					border-radius: 50%
					width: 32upx
					height: 32upx
					vertical-align: top
			.desc
				margin-top: 10upx
				overflow: hidden
				width: 100%
				height: 80upx
				display: -webkit-box
				-webkit-box-orient: vertical
				-webkit-line-clamp: 2
				.descImage
					position: relative
					top: 5upx
					width: 60upx
					height: 28upx
				.descTitle
					font-size: 26upx
					color: #333
			.discount
				margin: 10upx 0
				width: 60%
				text-align: center
				line-height: 24upx
				font-size: 24upx
				color: red
				border: 2upx solid red
			.discounta
					height: 24upx
			.price
				color:red
				font-size: 24upx
				text
					font-size: 40upx
</style>
